<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>响应布局</title>
		<style>
			body {
				margin: 0;
				padding: 0;
			}

			.container {
				width: 100vw;
				height: 100vh;
				background: linear-gradient(to right, red 70%, yellow 30%);
			}

			.content {
				max-width: 1200px;
				border: 1px solid black;
				margin: 0 auto;
			}

			.div1 {
				font-size: 50px;
			}

			.div2 {
				font-size: 30px;
			}

			@media (min-width: 901px) and (max-width: 1200px) {
				.div1,
				img,
				.div2 {
					transform-origin: left;
					transform: scale(0.8);
				}
			}

			@media (min-width: 401px) and (max-width: 900px) {
				.div1,
				img,
				.div2 {
					transform-origin: left;
					transform: scale(0.7);
				}
			}

			@media (max-width: 400px) {
				.div1,
				img,
				.div2 {
					transform-origin: left;
					transform: scale(0.6);
				}
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="content">
				<div class="div1">内容1</div>
				<img src="https://via.placeholder.com/200x200" width="200px" height="200px" alt="" />
				<div class="div2">内容2</div>
			</div>
		</div>
	</body>
</html>
